import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:goods_sample/widget/widget_scroll_behavior.dart';

import '../../routes.dart';

/// 商品列表Widget
class GoodsListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
      debugShowCheckedModeBanner: false,
      onGenerateRoute: RouterHelper.generateRoute,
      home: _GoodsListContainerWidget());
}

class _GoodsListContainerWidget extends StatefulWidget {
  @override
  _GoodsListSwitchWidget createState() => _GoodsListSwitchWidget();
}

/// 商品列表切换部件
class _GoodsListSwitchWidget extends State<_GoodsListContainerWidget> {
  // 列表样式
  var goodsListStyle = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('商品列表', style: TextStyle(color: Colors.white)),
          centerTitle: true,
          elevation: 0.8,
          backgroundColor: Colors.orange,
          actions: [
            IconButton(
                icon: goodsListStyle ? Icon(Icons.dehaze) : Icon(Icons.apps),
                onPressed: () => setState(() => goodsListStyle = !goodsListStyle))
          ],
        ),
        body: goodsListStyle ? _buildGridView(context) : _buildListView(context));
  }

  Widget _buildListView(BuildContext context) => ScrollConfiguration(
      behavior: NoScrollBehavior(),
      child: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) => _GoodsListItemWidget()));

  Widget _buildGridView(BuildContext context) => ScrollConfiguration(
      behavior: NoScrollBehavior(),
      child: GridView.builder(
          padding: EdgeInsets.all(4),
          itemCount: 20,
          scrollDirection: Axis.vertical,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 1 / 1.4),
          itemBuilder: (context, index) => _GoodsGridItemWidget()));
}

/// 商品列表——>线性列表样式
class _GoodsListItemWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => InkWell(
      onTap: () => Navigator.pushNamed(context, RouterHelper.goodsDetail),
      child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildGoodsLogo(context),
            _buildGoodsTitleLabelPriceContainer(context)
          ]));

  // 商品图
  Widget _buildGoodsLogo(BuildContext context) => Card(
      elevation: 0,
      margin: EdgeInsets.all(8),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(4))
      ),
      clipBehavior: Clip.antiAlias,
      child: Image(
          image: NetworkImage('https://cbu01.alicdn.com/img/ibank/2020/008/956/19872659800_1029509517.460x460xz.jpg'),
          fit: BoxFit.fill,
          width: 110,
          height: 110));

  // 商品标题，标签，单价容器
  Widget _buildGoodsTitleLabelPriceContainer(BuildContext context) => Expanded(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
            _buildGoodsTitle(context),
            _buildGoodsLabel(context),
            _buildGoodsPrice(context)
          ]));

  // 商品标题
  Widget _buildGoodsTitle(BuildContext context) => Container(
      alignment: Alignment.centerLeft,
      margin: EdgeInsets.symmetric(vertical: 8),
      child: Text(
          '2020秋季女装新款打底衫衣服韩版学生宽松长袖t恤女ins潮早秋上衣',
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            color: Colors.black,
            fontSize: 12,
            fontStyle: FontStyle.normal,
          )));

  // 商品标签
  Widget _buildGoodsLabel(BuildContext context) => Container(
      padding: EdgeInsets.all(2),
      color: Colors.green,
      child: Text(
        'NEW',
        style: TextStyle(
            color: Colors.white, fontSize: 8, fontStyle: FontStyle.normal),
      ));

  // 商品单价
  Widget _buildGoodsPrice(BuildContext context) => Container(
      padding: EdgeInsets.symmetric(vertical: 8),
      child: Text(
        '￥278.00',
        style: TextStyle(
            color: Colors.black,
            fontSize: 15,
            fontStyle: FontStyle.normal,
            fontWeight: FontWeight.bold),
      ));
}

/// 商品列表——>九宫格样式
class _GoodsGridItemWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => InkWell(
      onTap: () => Navigator.pushNamed(context, RouterHelper.goodsDetail),
      child: Column(children: [
        _buildGoodsLogo(context),
        _buildGoodsLabelAndPriceContainer(context),
        _buildGoodsTitle(context)
      ]));

  // 商品图片
  Widget _buildGoodsLogo(BuildContext context) => Card(
      elevation: 0,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(4))
      ),
      clipBehavior: Clip.antiAlias,
      child: Image(
        fit: BoxFit.fill,
        image: NetworkImage('https://cbu01.alicdn.com/img/ibank/2020/008/956/19872659800_1029509517.460x460xz.jpg')));


  // 商品标签和单价容器
  Widget _buildGoodsLabelAndPriceContainer(BuildContext context) =>
      Row(children: [_buildGoodsLabel(context), _buildGoodsPrice(context)]);

  // 商品标签
  Widget _buildGoodsLabel(BuildContext context) => Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.all(2),
      margin: EdgeInsets.all(8),
      color: Colors.green,
      child: Text(
        'NEW',
        style: TextStyle(
            color: Colors.white, fontSize: 8, fontStyle: FontStyle.normal),
      ));

  // 商品单价
  Widget _buildGoodsPrice(BuildContext context) => Container(
          child: Text(
        '￥ 278.00',
        style: TextStyle(
            color: Colors.black,
            fontSize: 15,
            fontStyle: FontStyle.normal,
            fontWeight: FontWeight.bold),
      ));

  // 商品标题
  Widget _buildGoodsTitle(BuildContext context) => Expanded(
      child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Text(
              '2020秋季女装新款打底衫衣服韩版学生宽松长袖t恤女ins潮早秋上衣',
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.black,
                fontSize: 12,
                fontStyle: FontStyle.normal,
              ))));
}
